<template>
  <div class="app-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <TreeData :node-data="company" :is-company="true" />
      <hr>
      <el-tree :props="{label:'name'}" :default-expand-all="true" :data="depts">
        <template v-slot="{data}">
          <TreeData :node-data="data" :is-company="false" @ediDepts="ediDepts" @theDelete="grtDeptsListFn" @addDeptsFn="addDeptsFn" />
        </template>
      </el-tree>
    </el-card>
    <!-- 会话框 -->
    <addDepts ref="getDialog" :node-data="nodeData" :is-show-dialog.sync="isShowDialog" @reloadPage="grtDeptsListFn" />
  </div>
</template>

<script>
import addDepts from './components/addDepts.vue'
import { listToTreeData } from '@/utils/index'
import { grtDeptsList } from '@/api/departments'
import TreeData from './components/TreeData.vue'
export default {
  components: {
    TreeData,
    addDepts
  },
  data() {
    return {
      // 公司数据
      company:
        {
          name: '江苏传智播客教育科技股份有限公司',
          manager: '负责人'
        },

      // 部门数据
      depts: [],
      isShowDialog: false,
      nodeData: {} // 树形组建的部门数据
    }
  },
  async  created() {
    this.grtDeptsListFn()
  },
  methods: {
    // 编辑
    async  ediDepts(nodeData) {
      // 通过ref触发弹窗函数
      await this.$refs.getDialog.getDeptsFn(nodeData)
      // 打开弹窗
      this.isShowDialog = true
    },
    // 添加
    addDeptsFn(nodeData) {
      this.isShowDialog = true
      // 接收树形组件部门数据
      this.nodeData = nodeData
    },
    // 封装部门获取数据接口
    async grtDeptsListFn() {
      const { depts } = await grtDeptsList()
      // listToTreeData 递归筛选方法
      this.depts = listToTreeData(depts, '')
    }
    // 关闭弹窗
    // isShowFn() {
    //   this.isShowDialog = false
    // }
  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
